<script setup>
// import HelloWorld from './components/HelloWorld.vue'
import * as echarts from 'echarts';
import { onMounted } from 'vue'

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main2'));

    // 绘制图表
    myChart.setOption({
        title: {
            text: 'ECharts 入门示例',
            textStyle: {
                color: '#37A2DA'
            }
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    });


    // 响应式调整大小
    const handleResize = () => {
        myChart?.resize();
    };

    window.addEventListener('resize', handleResize);
})



//websocket实时渲染

//①握手连接
// const ws = new WebSocket("ws://127.0.0.1:8009")

// //②连接成功时的回调
// ws.onopen = () => {
//     console.log('连接成功')
// }

// //③连接失败时的回调
// ws.onerror = () => {
//     console.log('连接失败')
// }

// //④接收到服务器数据后的回调
// ws.onmessage = (msg) => {
//     console.log(msg)
// }


</script>

<template>
    <div id="main2" class="wh100" style="padding-top: 18px;padding-left: 10px;"></div>
    <!-- style="border:1px solid red;padding-top: 18px;padding-left: 10px;" -->
</template>

<style scoped></style>
